<template>
	<view class="wrap">
		<view class="wrap-i">
			<view class="i-name">
				<view>孩子姓名</view>
				<input v-model="stuname" class="i-input" maxlength="15"/>
			</view>
			<view>我是TA的</view>
			<view class="icon-box">
				<view class="imgbox" @click="active=0">
					<image class="i-img" :class="[active==0?'select':'']" src="../../../static/img/k1.png"></image>
					<view>爸爸</view>
				</view>
				<view class="imgbox" @click="active=1">
					<image class="i-img" :class="[active==1?'select':'']" src="../../../static/img/k2.png"></image>
					<view>妈妈</view>
				</view>
			</view>
			<view class="icon-box">
				<view class="imgbox"  @click="active=2">
					<image class="i-img" :class="[active==2?'select':'']" src="../../../static/img/k3.png"></image>
					<view>亲友</view>
				</view>
				<view class="imgbox" @click="active=3">
					<image class="i-img" :class="[active==3?'select':'']" src="../../../static/img/k4.png"></image>
					<view>
						<input :cursor-spacing="20" v-model="name" maxlength="10" placeholder="自定义" class="i-input" />
					</view>
				</view>
			</view>
			<vs-cssloading :show="loadingshow"></vs-cssloading>
			<view class="i-btn">
				<vs-button  @click="fnSummit"></vs-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:-1,
				name:'',
				stuname:'',
				loadingshow:false
			}
		},
		methods: {
			fnSummit(){
				if(this.stuname==''){
					this.$fun.toast('请填写孩子姓名！')
					return;
				}
				if(this.active<0){
					this.$fun.toast('请选择一个关系角色！')
					return;
				}
				if(this.active==3){
					if(this.name==''){
						this.$fun.toast('请输入角色名称！')
						return;
					}
				}
				
				
				if(!uni.getStorageSync('userInfo')){
					this.$fun.toast('发生错误，请退出重试');
					return;
				}
				if(!this.$store.state.classInfo){
					this.$fun.toast('发生错误，请退出重试');
					return;
				}
				
				this.loadingshow=true
				let params={
					userid:uni.getStorageSync('userInfo').userid,
					wkid:this.$store.state.classInfo.wk_id,
					stu_name:this.stuname,
				}
				//console.log(params)
				switch(this.active){
					case 0:
						params.casetype='爸爸'
					break;
					case 1:
						params.casetype='妈妈'
					break;
					case 2:
						params.casetype='亲友'
					break;
					case 3:
						params.casetype=this.name
					break;
				}
				console.log(params)
				this.$fun.request(params,'php/xcx_bindstudent.php').then(res=>{
					console.log(res)
					if(res.data>0){
						setTimeout(()=>{
							this.loadingshow=false
							uni.reLaunch({
								url:'../daka/daka'
							})
						},500)
					}else{
						this.loadingshow=false
						this.$fun.modal('绑定失败，请重新绑定！')
					}
				})
				
				
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.wrap-i{
			width: 80%;
			height: 100%;
			//background: #007AFF;
			margin: 0 auto;
			position: relative;
			.i-name{
				display: flex;
				align-items: center;
				padding: 30px 0;
				.i-input{
					//background-color: #007AFF;
					flex: 1;
					margin-left: 10px;
					height: 35px;
					border-radius: 4px;
					border: 1px solid #eee;
					box-shadow: 2px 2px 3px #999 inset;
					padding: 4px 10px;
					font-size: 16px;
					color: #555;
				}
			}
			.i-btn{
				width: 200px;
				height: 45px;
				
				position: absolute;
				bottom: 50px;
				font-size: 16px;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 4px;
				margin: 0 auto;
				left: 0;right: 0;
				margin: 0 auto;
				
			}
			.icon-box{
				display: flex;
				//background: #007AFF;
				justify-content: space-around;
				margin-top: 20px;
				.imgbox{
					text-align: center;
					font-size: 16px;
					color: #555;
				}
				.select{
					border: 3px solid #ffff00;
				}
				.i-img{
					width: 80px;
					height: 80px;
					border-radius: 100%;
					background-color: #ff3385;
				}
				.i-input{
					//background-color: #1ED3D5;
					width: 100px;
					border-radius: 4px;
					border: 1px solid #FF9933;
					font-size: 16px;
				}
			}
		}
	}
</style>
